<!-- 我的拼团列表 -->
<template>
    <div class="main">
      <div class="infor">
        <p class="inforname">{{name}} ({{phone}})</p>
        <div>
          <img src="../../img/idcard.png" alt="">
          <p v-if="accountType==1">会员</p>
          <p v-if="accountType==2">注册用户</p>
          <p v-if="accountType==3">员工</p>
        </div>
      </div>
      <ul class="head">
        <li>
          <a @click="num=0,page=1,data=[],request(0)">
            <p :class="{'active':(num==0)}">可用团购</p>
            <div class="logo" v-if="num==0">
              <div class="line"></div>
              <div class="ling"></div>
              <div class="line"></div>
            </div>
          </a>
        </li>
        <li>
          <a @click="num=1,page=1,data=[],request(1)">
            <p :class="{'active':(num==1)}">往期团购</p>
            <div class="logo" v-if="num==1">
              <div class="line"></div>
              <div class="ling"></div>
              <div class="line"></div>
            </div>
          </a>
        </li>
      </ul>
      <!--<banner></banner>-->
      <div class="banner">
        <div class="title">
          <div class="banner-line"></div>
          <div class="rhombus"></div>
          <p>{{adds}}</p>
          <div class="rhombus"></div>
          <div class="banner-line"></div>
        </div>
      </div>
      <ul class="content">
          <li v-for="item in data" v-if="type !==0">
            <a :href="myUrl+'/tuandetail?id='+item.open_id+'&join_id='+item.join_id">
              <img :src=url+item.img  alt="">
              <p class="last" v-if="item.syn_cardNo !=undefined">院余编号:{{item.syn_cardNo}}</p>
              <p class="head">{{item.name}}</p>
              <div class="title">
                <div class="rhombus"></div>
                <p v-if="item.status== 1" class="color1">已成功</p>
                <p v-if="item.status== 2" class="color2">已结束</p>
                <p v-if="item.status== 3" class="color3">进行中</p>
                <p v-if="item.status== 4" class="color4">已使用</p>
                <p v-if="item.status== 5" class="color5">已过期</p>
                <p v-if="item.status== 6" class="color6">进行中</p>
                <p v-if="item.status== 7" class="color7">可使用</p>
                <p v-if="item.status== 8" class="color7">已退款</p>
                <div class="rhombus"></div>
              </div>
            </a>
          </li>
        </ul>
      <div class="notfound" v-if="type==0">
          抱歉,没有更多数据了
       </div>
      <div class="prop2" v-if="isShow">
        <div class="propcon">
          <p>没有更多数据了~!</p>
          <a  @click="isShow = 0">确定</a>
        </div>
      </div>
      <!--<bottom :num="pis"></bottom>-->
	  <div class="foot">
        <div  :class="{'active':(pis==0)}" @click="goindex()">
          <i class="iconfont">&#xe634;</i>
          <p>首页</p>
        </div>
        <div :class="{'active':(pis==1)}">
          <i class="iconfont">&#xe625;</i>
          <p>我的拼团</p>
        </div>
      </div>
      <!--<PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>-->
    </div>
</template>

<script>
    import $ from "jQuery"
    import banner from "./banner.vue"
    import bottom from "./bottom.vue"
    import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
    import wx from 'weixin-js-sdk';
    import {
      baseUrl,auth,myUrl,
    } from "@/assets/public"
    export default {
        name: 'main',
        data () {
            return {
              url:"",
              data:[],
              num:"",
              pis:1,
              type:1,
              page:1,
              isShow:0,
              adds:"",
              loading:true,
              size:".5rem",
              color:"#333",
              shareTitle:"美丽田园代言人刘涛邀您来开团，爱拼才美丽!",
              lineLink:myUrl,
              imgUrls:myUrl+"/static/img/share.png",
              descContent:"越“拼”越实惠，越“拼”价越低",
              appShareTitle:"美丽田园代言人刘涛邀您来开团，爱拼才美丽!",
              accountType:"",
              name:"",
              phone:"",
			  myUrl:myUrl,
            }
        },
        created() {
          //若无token 则跳转首页(防止非系统用户直接访问该链接)
          if(localStorage.openid == ""){
            window.location.href= myUrl+"/";
          }
          auth();
          this.url=baseUrl;
          this.request();
          this.lineLink =window.location.href;
        },
        mounted(){
          //监听滑动
          window.addEventListener('scroll',this.scrollEvent);
          //微信分享
          this.wechatShare();
        },
        destroyed:function () {
          //取消监听
          window.removeEventListener('scroll',this.scrollEvent);
        },
        methods: {
          //首次请求获取数据
          request: function(){
            var that = this;
            $.ajax({
                type:"GET",
                url:that.url+"/api/myGroup/"+this.num+":status",
                data:{
                  "openid": localStorage.openid,
				  page:that.page
                },
                dataType:"json",
                success:function (res) {
                  if(res.status==200){
                    that.type=1;
                    that.page++;
                    that.data = that.data.concat(res.data.list.data);
                    that.adds=res.data.adds;
                    that.accountType=res.data.accountType;
                    that.name=res.data.name;
                    that.phone=res.data.phone;
                    that.loading=false;
                  }else if(res.status == -200){
                    that.type=0;
                    that.adds=res.data.adds;
                  }
                }
              });
          },
          //下拉获取数据
          getData: function () {
              var that = this;
              $.ajax({
                type:"GET",
                url:that.url+"/api/myGroup/"+this.num+":status",
                data:{
                  "openid": localStorage.openid,
                  page:that.page
                },
                dataType:"json",
                success:function (res) {
                  if(res.status==200){
                    if(that.data.length>0){
                      that.type=1;
                      that.data=that.data.concat(res.data.list.data);
                      that.page++;
                    }else {
                      that.type=0;
                    }
                    if(res.data.list.data.length ==0){
                      that.isShow=1;
                    }
                  }else if(res.status == -200){
                    that.isShow=1;
                  }
                }
              });
            },
          //滚到事件
          scrollEvent: function () {
            var that = this;
            var top = $('body').scrollTop();
            var windowH = $(window).height();
            var conH = $(document).height();
            if (conH - (top + windowH) <= 1 && conH != windowH) {
              that.getData();
            }
          },
		  goindex(){
		    location.href = myUrl+'/';
		  },
          //微信分享
          wechatShare(){
            let that = this;
            wx.ready(function (){
              wx.onMenuShareTimeline({
                title: that.shareTitle, // 分享标题
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareAppMessage({
                title: that.appShareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {}
              });
              wx.onMenuShareQQ({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareWeibo({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
              wx.onMenuShareQZone({
                title: that.shareTitle, // 分享标题
                desc: that.descContent, // 分享描述
                link: that.lineLink, // 分享链接
                imgUrl: that.imgUrls, // 分享图标
                success: function () {
                  // 用户取消分享后执行的回调函数

                },
                cancel: function () {}
              });
            })
          },

        },
        components: {
             banner,bottom,PulseLoader,
        }
    }
</script>

<style scoped>
  .infor {
    width: 100%;
    height:1rem;
    display: flex;
    align-items:center;
    border-bottom:1px solid #000;
    color: #bbbbbb;
    position: fixed;
    top:0;
    left:0;
    background: #ffffff;
    z-index:9999;
  }
  .infor p {
    font-size:.34rem;
  }
  .inforname {
    width: 50%;
    text-align: center;
    white-space:nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .infor div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items:center;
  }
  .infor div p {
    margin-left:.3rem;
  }

  ul.head {
    width: 100%;
    height: 1.5rem;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top:1rem;
    left:0;
    z-index: 9999;
  }
  ul.head li {
    width: 50%;
    height:1.5rem;
  }
  ul.head li a {
    width: 100%;
    height:1rem;
    padding-top:.5rem;
    display: flex;
    justify-content: center;
    align-items:flex-start;
    flex-wrap: wrap;
  }
  ul.head li a p {
    width: 100%;
    text-align: center;
    font-size:.4rem;
    color: #999999;
  }
  ul.head li a  .logo{
    display: flex;
    align-items: center;
  }
  ul.head li a .logo .line {
    width: .3rem;
    height: 2px;
    background: #333;
  }
  ul.head li a .logo .ling {
    width: .2rem;
    height: .2rem;
    border:3px solid #333;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin:0 .1rem;
  }
  .banner {
    width: 100%;
    height:auto;
    position: fixed;
    top:2.5rem;
    left:0;
    background: #ffffff;
    z-index: 9999;
  }
  .banner .title {
    width: 80%;
    height:1.5rem;
    margin:0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner .title .banner-line {
    width: 1rem;
    height: 1px;
    background: #333;
  }
  .banner .title p {
    font-size:.3rem;
  }
  .banner .title .rhombus {
    width: .15rem;
    height: .15rem;
    border:1px solid #888888;
    transform: rotate(45deg);
    margin:0 .3rem;
  }
  .content {
    width: 94%;
    overflow:auto;
    padding:0 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom:4rem;
    margin-top:4rem;
  }
  .content li {
    width: 48%;
    height: 3.5rem;
    /*background: url("../../img/index-2.png") center center no-repeat;*/
    background-size: cover;
  }
  .content li:nth-child(n+3) {
    margin-top:.3rem;
  }
  .content li a {
    display: block;
    width: 100%;
    height: 3.5rem;
    overflow: hidden;
    border:1px solid #999999;
  }
  .content li a img {
    width: 100%;
    height:auto;
  }
  .content li a .last {
    width: 90%;
    margin:0 auto;
    text-align: center;
    /*border-bottom:1px solid #999999;*/
    /*text-align: center;*/
    /*line-height:.8rem;*/
    /*letter-spacing: 1px;*/
    /*white-space:nowrap;*/
    /*-ms-text-overflow: ellipsis;*/
    /*text-overflow: ellipsis;*/
    /*overflow: hidden;*/
  }
  .content li a .head {
    width: 90%;
    margin:0 auto;
    border-bottom:1px solid #999999;
    text-align: center;
    line-height:.8rem;
    letter-spacing: 1px;
    white-space:nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .content li a .title {
    display: flex;
    justify-content: center;
    align-items:center;
    height:.8rem;
    line-height:.8rem;
    letter-spacing: 1px;
  }
  .content li a .title .rhombus {
    width: .15rem;
    height: .15rem;
    border:1px solid #333;
    transform: rotate(45deg);
    margin:0 .3rem;
  }
  .color1 {
    color: #d18bcf;
  }
  .color2 {
    color: #3c68e6;
  }
  .color3 {
    color:#3da6ff;
  }
  .color4 {
    color: #ff5454;
  }
  .color5 {
    color: #d29f15;
  }
  .color6 {
    color:#3da6ff;
  }
  .color7 {
    color: #58b884;
  }
  .active {
    color: #000 !important;
  }
  .notfound {
    width: 100%;
    text-align: center;
    font-size:.5rem;
  }


  .prop2 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop2 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop2.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop2 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop2 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 9999999;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
  
  .foot {
    width: 100%;
    height:1.4rem;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left:0;
    display: flex;
    align-items: center;
  }
  .foot div {
    width: 50%;
    height:1.4rem;
    text-align: center;
  }
  .foot div i {
    display: block;
    font-size:.6rem;
    margin-top:.2rem;
    color: #999999;
  }
  .foot div p {
    font-size:.32rem;
    color: #999999;
  }
  .active i {
    color: #333 !important;
  }
  .active p {
    color: #333 !important;
  }
</style>
